<script lang="ts" setup>
import { formatMoney, getImgUrl } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
})
function back() {
  uni.navigateBack()
}

const current = ref(0)
const serviceShow = ref(false)
const goodsInfoShow = ref(false)
const goodsInfo = ref<any>({})
const goodsNum = ref(1)

onLoad((options: any) => {
  const data: any = JSON.parse(decodeURIComponent(options.query))
  data.cover = data.cover.split(',')
  goodsInfo.value = data
})
function handlePopup(type: number) {
  if (type === 1) {
    serviceShow.value = true
  }
  else {
    goodsInfoShow.value = true
  }
}

// 确认下单按钮
function handleBuy() {
  Object.assign(goodsInfo.value, { num: goodsNum })
  uni.navigateTo({
    url: `/pages/order/index?query=${encodeURIComponent(JSON.stringify(goodsInfo.value))}`,
  })
}
</script>

<template>
  <view>
    <wd-navbar :bordered="false" left-arrow safeareainsettop placeholder fixed :title="goodsInfo.name" @click-left="back" />
    <view class="px-[26rpx] pb-20">
      <wd-swiper
        v-model:current="current" :list="goodsInfo.cover" autoplay height="800rpx"
        image-mode="aspectFill"
      />
      <view class="bg-white">
        <view class="flex items-center justify-between py-[24rpx] pb-[18rpx] pt-[30rpx]">
          <view class="flex items-end">
            <view class="mr-[10rpx] text-[34rpx] text-[#EB0E26]">
              <text class="text-[26rpx]">￥</text>{{
                formatMoney(goodsInfo.price) }}
            </view>
            <view class="text-[26rpx] text-[#ccc] line-through">
              <text>￥</text>{{ formatMoney(goodsInfo.origin_price) }}
            </view>
          </view>
          <view class="text-[26rpx] text-[#ccc]">
            已销{{ '3181' }} &nbsp;|&nbsp; 剩余销{{ goodsInfo.sell_num }}
          </view>
        </view>
        <view class="px-[24rpx] pb-[24rpx] text-[36rpx] font-bold">
          {{ goodsInfo.namecontent }}
        </view>
      </view>
      <view class="mt-[10rpx] bg-white px-[24rpx]">
        <view class="flex items-center justify-between py-[30rpx]" @click="handlePopup(1)">
          <view class="flex items-center">
            <text class="mr-[18rpx] text-[34rpx] font-bold">服务</text>
            <text class="text-[26rpx] text-[#ccc]">品质保障.1v1专属服务.退换货服务</text>
          </view>
          <wd-icon name="arrow-right" size="22px" />
        </view>
        <view class="h-[2rpx] bg-[#f8f8f8]" />
        <view class="flex items-center justify-between py-[30rpx]" @click="handlePopup(2)">
          <view class="mr-[18rpx] flex items-center text-[34rpx] font-bold">
            <text class="mr-[18rpx] text-[34rpx] font-bold">选择</text>
            <wd-img
              v-for="(item, index) in goodsInfo.cover" :key="index" width="60rpx" height="60rpx"
              radius="10rpx" mode="aspectFit" :src="item"
            />
          </view>
          <view class="flex items-center">
            <text class="text-[26rpx] text-[#ccc]" style="margin-right: 6rpx">共1款</text>
            <wd-icon name="arrow-right" size="22px" />
          </view>
        </view>
      </view>
      <view class="mt-[10rpx] bg-white">
        <view class="pb-[16rpx] pt-[30rpx] text-center text-[36rpx]">
          商品详情
        </view>
        <wd-img
          v-for="item in goodsInfo.attachments" :key="item.id" width="100%" mode="widthFix"
          :src="getImgUrl(item.file_url)" :enable-preview="true"
        />
      </view>
    </view>
    <wd-action-sheet v-model="serviceShow" title="服务" @close="serviceShow = false">
      <view class="overflow-hidden px-[30rpx] pb-[30rpx]">
        <wd-img
          mode="widthFix" width="75%"
          src="https://cdn.hnqingnai.com/prod/shouliaot/file/ic_shop_details_service_list_1.webp"
        />
        <wd-img
          class="my-[30rpx]" mode="widthFix" width="75%"
          src="https://cdn.hnqingnai.com/prod/shouliaot/file/ic_shop_details_service_list_2.webp"
        />
        <wd-img
          mode="widthFix" width="75%"
          src="https://cdn.hnqingnai.com/prod/shouliaot/file/ic_shop_details_service_list_3.webp"
        />
      </view>
    </wd-action-sheet>
    <wd-action-sheet v-model="goodsInfoShow">
      <view class="reactive px-[24rpx] py-[30rpx]">
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <wd-img width="180rpx" radius="12rpx" mode="widthFix" :src="goodsInfo.cover[0]" />
            <view class="ml-[10rpx] text-[38rpx] text-[#EB0E26] font-bold">
              <text
                class="text-[24rpx]"
              >
                ￥
              </text>{{ formatMoney(goodsInfo.price) }}
            </view>
          </view>
          <view class="absolute right-[24rpx] top-[30rpx] p-[10rpx]">
            <wd-icon name="close" size="40rpx" @click="goodsInfoShow = false" />
          </view>
        </view>
        <view class="my-[40rpx] flex items-center justify-between">
          <view class="text-[34rpx]">
            数量
          </view>
          <wd-input-number v-model="goodsNum" custom-class="m-input-num" input-width="80rpx" :min="1" />
        </view>
        <wd-button type="success" custom-class="w-full" size="large" @click="handleBuy">
          立即购买
        </wd-button>
      </view>
    </wd-action-sheet>
    <view class="fixed bottom-0 left-0 right-0 bg-white p-[30rpx]">
      <wd-button type="success" custom-class="w-full" size="large" @click="handlePopup(2)">
        立即购买
      </wd-button>
    </view>
  </view>
</template>
